import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Features from '../views/Features.vue'
import Showcase from '../views/Showcase.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/features',
    name: 'Features',
    component: Features
  },
  {
    path: '/demo',
    redirect: '/showcase'
  },
  {
    path: '/showcase',
    name: 'Showcase',
    component: Showcase,
    children: [
      {
        path: '',
        name: 'showcase-home',
        component: () => import('../views/showcase/ShowcaseHome.vue')
      },
      {
        path: 'html',
        name: 'HtmlDemo',
        component: () => import('../views/showcase/HtmlDemo.vue')
      },
      {
        path: 'css',
        name: 'CssDemo',
        component: () => import('../views/showcase/CssDemo.vue')
      },
      {
        path: 'javascript',
        name: 'JavaScriptDemo',
        component: () => import('../views/showcase/JavaScriptDemo.vue')
      },
      {
        path: 'typescript',
        name: 'TypeScriptDemo',
        component: () => import('../views/showcase/TypeScriptDemo.vue')
      },
      {
        path: 'threejs',
        name: 'ThreeDemo',
        component: () => import('../views/showcase/ThreeDemo.vue')
      },
      {
        path: 'vue3',
        name: 'Vue3Demo',
        component: () => import('../views/showcase/Vue3Demo.vue')
      },
      {
        path: 'echarts',
        name: 'EchartsDemo',
        component: () => import('../views/showcase/EchartsDemo.vue')
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router 